<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>间接查找节点</title>
	</head>
	<body>
		<ul>
			<li id="red">
				<p>绿色</p>
			</li>
			<li id="green">绿色</li>
		</ul>
	</body>
	<!-- 
	 childNodes  			返回元素的一个子节点的数组
	 children 				返回元素的所有的子元素数组
	 firstChild 			返回元素的第一个子节点
	 lastChild 				返回元素的最后一个子节点
	 nextSibling 			返回元素的下一个兄弟节点
	 parentNode 			返回元素的父节点
	 previousSibling        返回元素的上一个兄弟节点
	 -->
	<script type="text/javascript">
		var ul=document.getElementsByTagName("ul")[0];
		var red=document.getElementById("red");
		// console.log(ul.childNodes);
		// console.log(ul.children);
		console.log(red.firstChild);
		console.log(red.firstElementChild);
		// console.log(ul.lastChild);
		console.log(red.nextSibling);
		console.log(red.nextElementSibling);
		console.log(ul.parentNode);
		console.log(ul.previousSibling);
	</script>
</html>
